<template>
 <el-form
    ref="refControl"
    class="demo-form-inline"
    v-bind="$attrs"
    :model="model"
    :inline="false"
    :label-suffix="labelSuffix"
    :label-width="labelWidth"
  >
    <el-row :gutter="15">
      <el-col
        v-for="(ctrId, index) in colOrder"
        :key="'form_' + ctrId + index"
        :span="formColSpan[ctrId]"
        v-show="showCol[ctrId]"
      >
        <transition name="el-zoom-in-top">
          <el-form-item
            :rules="ruleMeta[ctrId] ?? []"
            :prop="childMetaList[ctrId].colName"
            :label-width="childMetaList[ctrId].labelWidth??''"
            :label="childMetaList[ctrId].label"
            v-show="showCol[ctrId]"
          >
            <!--判断要不要加载插槽-->
            
            <template v-if="(slotsKey.includes(childMetaList[ctrId].colName))">
              <!--<slot :name="ctrId">父组件没有设置插槽</slot>-->
              <slot :name="childMetaList[ctrId].colName">父组件没有设置插槽</slot>
            </template>
          
            <!--表单item组件，采用动态组件的方式-->
            <template v-else>
              <component
                :is="formItemKey[childMetaList[ctrId].controlType]"
                :model="model"
                :meta="childMetaList[ctrId]"
                v-bind="childPropsList[ctrId]"
              >
              </component>
            </template>
          </el-form-item>
        </transition>
      </el-col>
    </el-row>
  </el-form>
</template>

<script setup lang="ts" generic="T extends object">
  import { ref, onMounted } from 'vue'
  // 表单组件的接口
  import type { IFromProps } from '../map'
  // 引入表单子控件
  import { formItemKey } from '../form-item/_map-form-item'

  // 表单控件的属性 
  import { formController, myExpose } from '../map'
 
  defineOptions({
    name: 'nf-el-from-slot',
    inheritAttrs: false,
  })

  const props = withDefaults(defineProps<IFromProps<T>>(), {
    labelSuffix: '：',
    labelWidth: '130px'
  })
  // 获取 $ref
  const { refControl, expose } = myExpose()
  // 暴露 el-form
  defineExpose({ expose })

  const slots = defineSlots()
  const slotsKey = Object.keys(slots)

  // 调用表单的控制类
  const { state } = formController(props)

  const {
    // formMeta,
    childPropsList,
    childMetaList,

    colOrder,
    ruleMeta,
    formColSpan, // 确定组件占位
    showCol // 是否显示字段的对象
    // setFormColShow, // 设置组件联动 
  } = state

</script>